<template>
  <div class="w-hui">
    <!-- 头部 -->
    <div class="w-header">
      <div class="w-xhead">
        <i></i>
        <span>个人中心</span>
        <i @click="reset()"></i>
        <i ></i>
      </div>
    </div>
<!-- 中间 -->
    <div class="w-m">
        <div class="w-main">
          <!-- ==1 -->
          <div class="w-maintop">
             <div class="w-img"> 
                  <span @click="person()"><img :src="wImg1" alt="图片"/></span>
                  <span @click="deng()">{{name1}}</span>
             </div>
             <div class="w-btn" @click="withdraw()">
               账户提现
             </div>
          </div>
          
        </div>
        <!-- ==2 -->
          <div class="w-ding clearfix">
            <div>我的订单</div>
            <div>查看所有订单 ></div>
          </div>
          <!-- ==3 -->
          <div class="w-dfh">
            <ul>
              <li v-for="(v1,index1) in arr1" :key="'inf1'+index1"  @click="order(index1)"><i></i><span>{{v1}}</span></li>
            </ul>
          </div>
          <!-- ==4 -->
          <div class="w-mony">
            <div class="w-ding">
               <div>我的反金号</div>
               <div @click="moreMony">查看更多 ></div>
            </div>
            <div class="w-mxin" v-show="bol">
              <ul>
                <li v-for="(tmp,b1) in obj1" :key="'in1'+b1">
                  <span>{{tmp.t}}</span>
                  <span>消费：￥{{tmp.f}}</span>
                  <span>排号：{{tmp.h}}</span>
                </li>
                <li v-for="tmp in obj1" :key="'in2'+tmp">
                  <span>{{tmp.t}}</span>
                  <span>消费：￥{{tmp.f}}</span>
                  <span>排号：{{tmp.h}}</span>
                </li>
                <li v-for="tmp in obj1" :key="'in3'+tmp">
                  <span>{{tmp.t}}</span>
                  <span>消费：￥{{tmp.f}}</span>
                  <span>排号：{{tmp.h}}</span>
                </li>
                <li v-for="tmp in obj1" :key="'in4'+tmp"> 
                  <span>{{tmp.t}}</span>
                  <span>消费：￥{{tmp.f}}</span>
                  <span>排号：{{tmp.h}}</span>
                </li>
              </ul>
            </div>
          </div>
          <!-- ===5 -->
          <div class="w-fen">
            <ul>
              <li v-for="(v2,k2) in arr2" :key="(v2,k2)" @click="change1(k2)">
                <div>0</div>
                <span>{{v2}}</span>
              </li>
            </ul>
          </div>                                                                                                    
          <div class="w-rzheng">
            <ul>
              <li v-for="(v3,iv) in arr3" :key="iv" @click="gon(iv)">
                <span></span>
                <div>{{v3}}</div>
              </li>
            </ul>
          </div>
    </div>
<!-- 底部 -->
      <foots></foots>
  </div>
</template>

<script>
import footer from '../../components/ma/footer';
import axios from 'axios';
export default {
    name:'Login',
    data() {
        return {
            bol:false,
            fot:[],
            nicheng:'登录/注册',
             // 通过this.$store.state 来获取状态
            // count:this.$store.state.count,
            // arr1:this.$store.getters.getArr,
            arr1:['待支付','待发货','待收货','交易完成'],
            arr2:['我的神灯值','我的足迹','我的优惠券','我的心得'],
            arr3:['实名认证','收货地址','关注公众号','客服与反馈'],
            obj1:[
              {t:'2017/06/26',f:100,h:10}
            ],
            wImg1:this.$store.state.headImg,
            name1:this.$store.state.name,
        }
    },
    components:{
      'foots':footer,
    },
    mounted(){
    },
    methods:{
      // 我的设置
      person(){
        this.$router.replace('/person');
      },
      // 我的足迹
      change1(index){
        console.log(index);
        
        if(index==0){
          this.$router.replace('/dengzhi');
        }
        if(index==1){
          this.$router.replace('/footMark');
        }
        if(index==2){
          this.$router.replace('/coupon');
        }
        if(index==3){
          this.$router.replace('/assess');
        }
      },
      deng(){
         this.$router.replace('/login1');
      },
      withdraw(){ 
         this.$router.replace('/account');
      },
      // 设置
      reset(){
         this.$router.replace('/reset');
      },
     moreMony(){
      this.bol=!this.bol;

     },
     order(v1){
       if(v1==0){
         this.$router.replace('/waitDefray');
        //  this.$router.push({
        //    path:'/waitDefray',
        //    params:{id:'1'},
        //  });

       }if(v1==1){
         this.$router.replace('/waitorder');
       }if(v1==2){
         this.$router.replace('/waitReceive');
       }if(v1==3){
         this.$router.replace('/tradeFinish');
       }

     },
     gon(iv){
       console.log(iv);
       if(iv==0){
         this.$router.replace('/accredit');
       }
       if(iv==1){
         this.$router.replace('/address');
       }
       if(iv==2){
         this.$router.replace('/gon');
       }
       if(iv==3){
         this.$router.replace('/feedback');
       }
     }
    }
    
}
</script>

<style scoped>
.w-hui{
    background-color: #ccc;

}
/* ==5 */
/* .w-rzheng,.w-fen{
  width: calc(100% - 4rem);
  padding: 0 2rem;
} */
.w-rzheng ul ,.w-fen ul{
display: flex;
justify-content: space-around;
color: #4c4c4c;
font-size: 2.4rem;
text-align: center;
height: 12rem;
background-color: #fff;

}
.w-fen{
  border-bottom: 0.1rem solid #ccc;
}
.w-rzheng ul li ,.w-fen ul li{
  flex: 1;
}
.w-fen ul li div{
  height: 7.5rem;
  color: #e53e42;
  font-size: 3rem;
  line-height: 7.5rem;
}
.w-rzheng{
  padding-bottom: 23rem;

}
.w-rzheng ul {
  background-color: #ccc;
}
.w-rzheng ul li {
  padding-top:2.2rem ;
  font-size: 0;
  background-color: #fff;

}
.w-rzheng ul li div{
  font-size: 2.4rem;
}
.w-rzheng ul li span{
  display: inline-block;
  height: 4.2rem;
  width: 4.4rem;
}
.w-rzheng ul li:nth-child(1) span{
  background: url(../../assets/user/true-name.png) no-repeat -5.4rem 0.5rem ;
}
.w-rzheng ul li:nth-child(2) span{
  background: url(../../assets/user/true-name.png) no-repeat -10.4rem 0 ;
}
.w-rzheng ul li:nth-child(3) span{
  background: url(../../assets/user/true-name.png) no-repeat -15.8rem 0.1rem ;
}
.w-rzheng ul li:nth-child(4) span{
  background: url(../../assets/user/true-name.png) no-repeat -21.4rem 0.4rem ;
}
/* ==4 */
.w-mxin ul{
border-bottom: 2rem solid #f2f2f2;
}
.w-mxin ul li{
  border-bottom: 0.1rem solid #cccccc;
  color:#666;
  font-size: 2.4rem;
  height: 8rem;
  line-height: 8rem;
  display: flex;
  background-color: #fff;

/* justify-content:space-around; */
}
.w-mxin ul li span{
  flex: 1;
}
/* ==3 */
.w-dfh{
  height: 9.9rem;
  text-align: center;
  overflow: hidden;
  border-bottom: 2rem solid #f2f2f2;
}
.w-dfh ul{
  height: 9.9rem;
  display: flex;
  justify-content: space-around;
  color: #4c4c4c;
  font-size: 0;
  background-color: #fff;
}
.w-dfh ul li span{
  display: inline-block;
  width: 100%;
  font-size: 2.4rem;
}
.w-dfh ul li i{
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  display:inline-block;
  height: 3.2rem;
  width: 3.4rem;
}
.w-dfh ul li:nth-child(1) i{
  background: url(../../assets/user/user-huo1.png) no-repeat 0.1rem 0.2rem;
}
.w-dfh ul li:nth-child(2) i{
  background: url(../../assets/user/user-huo2.png) no-repeat 0 0;
}
.w-dfh ul li:nth-child(3) i{
  background: url(../../assets/user/user-huo3.png) no-repeat 0.1rem 0.2rem;
}
.w-dfh ul li:nth-child(4) i{
  background: url(../../assets/user/user-huo4.png) no-repeat 0.3rem 0.2rem;
}
/* ==2 */
.w-ding{
  height: 8rem;
  line-height: 8rem;
  background-color: #fff;
  width: calc(100% - 4rem);
  padding: 0 2rem;
  border-bottom: 0.1rem solid #cccccc;
}
.w-ding div:nth-child(1){
  float: left;
  font-size: 3rem;
  color: #4c4c4c;
  text-align: left;
}
.w-ding div:nth-child(2){
  float: right;
  font-size: 2.4rem;
  color: #666666;
  text-align: right;
}
/* ==1 */
.w-m{
  width: 100%;
  background-color: #f2f2f2;
}
.w-main{
  background-color: #fee3e3;
}
.w-maintop{
  width: calc(100% - 4rem);
  padding: 0 2rem;
  height: 33.6rem;
  position: relative;
}
.w-maintop .w-img{
  position: absolute;
  bottom: 9.4rem;
  height: 10rem;
  /* width: 20rem; */
  /* outline: 1px solid #00f; */
  
}
.w-maintop .w-img span{
  position: absolute;
  top: 0;
}
.w-maintop .w-img span img{
  height:100%;
}
.w-maintop .w-img span:nth-of-type(1){
  left: 0;
  height: 10rem;
  width: 10rem;
  border-radius: 100%;
  background-color: #e38e8e;
  overflow: hidden;
}
.w-maintop .w-img span:nth-of-type(2){
  /* background-color: #fff; */
  left: 12rem;
  text-align: left;
  height: 10rem;
  line-height: 10rem;
  width: 40rem;
  font-size: 3rem;
  color: #4c4c4c;
}
.w-maintop .w-btn{
position: absolute;
bottom: 3.8rem;
right: 2.4rem;
height: 4rem;
width: 14rem;
border-radius: 4rem;
background-color: #d26060;
font-size: 2.4rem;
color: #fff;
line-height: 4rem;
text-align: center;

}

/* 头部 */
.w-header{
  background-color: #e53e42;
  width: 100%;
  height: 9.6rem;
  color: #fff;
  font-size: 3rem;
  /* padding-top: 0.8rem; */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
}
.w-xhead{
  height:9.6rem;
  width:calc(100% - 4rem) ;
  padding: 0 2rem;
  line-height: 9.6rem;
  position: relative;
}
.w-xhead i{
  height: 3.6rem;
  width: 3.6rem;
  /* outline: 0.2rem solid #ffffff; */
  position: absolute;
  top: 50%;
  transform: translatey(-1.8rem);
}
.w-xhead i:nth-of-type(1){
  /* float: left; */
  left: 2rem;
  background: url(../../assets/user/top-email.png) no-repeat 0 0;
}
.w-xhead i:nth-of-type(2){
  /* float: right; */
  right: 2rem;
  background: url(../../assets/user/top-shezhi.png) no-repeat 0 0;
}
.w-xhead i:nth-of-type(3){
  /* float: right; */
  right: 6.8rem;
  background: url(../../assets/user/top-msg.png) no-repeat 0 0;
}
/* 头部 */
/* 底部 */
.w-footer{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 9.6rem;
  background-color: #fff;
  z-index: 9;
}
.w-xfoot{
  border-top: 0.1rem solid #e6e6e6;
  height: 9.6rem;
  overflow: hidden;
}
.w-xfoot ul{
  display: flex;
  height: 9.6rem;
}
.w-xfoot ul li{
  flex: 1;
  font-size:2rem;
  color: #666;
  text-align: center;

}
.w-xfoot ul li.w-red{
  color: #e83d41;
}
.w-xfoot ul li{
  position: relative;
  overflow: hidden;
}
.w-xfoot ul li span{
  display: inline-block;
  width: 100%;
  margin-top:-0.8rem ;
  
}
.w-xfoot ul li i{
  margin-top: 1.2rem;
  display: inline-block;
  height: 5rem;
  width: 5rem;
  /* outline: 0.1rem solid #00f; */
}
/* list1 */
.w-xfoot ul .w-list1:nth-child(1) i{
  background: url(../../assets/user/bottom1.png) no-repeat -5.5rem 0;
}
.w-xfoot ul .w-list1:nth-child(2) i{
  background: url(../../assets/user/bottom2.png) no-repeat -5.5rem 0;
}
.w-xfoot ul li:nth-child(3) em{
  margin-top: 1.5rem;
  display: inline-block;
  height: 5.5rem;
  width: 11.3rem;
  background: url(../../assets/user/bottom3.png) no-repeat 0 0;
}
.w-xfoot ul .w-list1:nth-child(4) i{
  margin-left: -0.8rem;  
  background: url(../../assets/user/bottom4.png) no-repeat -5.4rem 0;
}
.w-xfoot ul .w-list1:nth-child(5) i{
  background: url(../../assets/user/bottom5.png) no-repeat -5.6rem 0;
}
/* list2 */
.w-xfoot ul .w-list2:nth-child(1) i{
  background: url(../../assets/user/bottom1.png) no-repeat 0 0;
}
.w-xfoot ul .w-list2:nth-child(2) i{
  background: url(../../assets/user/bottom2.png) no-repeat 0 0;
}
.w-xfoot ul .w-list2:nth-child(4) i{
  margin-left: -0.8rem;
  background: url(../../assets/user/bottom4.png) no-repeat 0 0;
}
.w-xfoot ul .w-list2:nth-child(5) i{
  background: url(../../assets/user/bottom5.png) no-repeat 0.2rem 0;
}
/* 底部 */
/* 清浮动 */
.clearfix::after{
  content: '';
  height: 0;
  visibility: hidden;
  clear: both;
  display: block;
  }
  .clearfix{
    *zoom: 1;
  }
</style>